<template>
  <div>
    <!-- 表单区域 -->
    <el-form :inline="true" class="member-form" ref="memberFormRef" :model="query">
      <el-form-item prop="cardNum">
        <el-input v-model="query.cardNum" placeholder="会员卡号"></el-input>
      </el-form-item>
      <el-form-item  prop="name" >
        <el-input v-model="query.name" placeholder="会员姓名"></el-input>
      </el-form-item>
      <el-form-item prop="payType">
        <el-select v-model="query.payType" placeholder="请选择支付类型">
          <el-option
            v-for="item in payTypeOption"
            :key="item.type"
            :label="item.name"
            :value="item.type">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="birthday">
        <el-date-picker
          v-model="query.birthday"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button type="primary" @click="addMember">新增</el-button>
        <el-button type="primary" @click="resetMemberForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table :data="memberList" height="380" style="width: 100%" border  stripe >
      <el-table-column type="index" label="*"> </el-table-column>
      <el-table-column prop="cardNum" label="会员卡号"> </el-table-column>
      <el-table-column prop="name" label="会员姓名"> </el-table-column>
      <el-table-column prop="birthday" label="会员生日"> </el-table-column>
      <el-table-column prop="phone" label="手机号码"> </el-table-column>
      <el-table-column prop="integral" label="可用积分"> </el-table-column>
      <el-table-column prop="money" label="开卡金额"> </el-table-column>
      <el-table-column prop="payType" label="支付类型">
        <template slot-scope="scope">{{scope.row.payType | payTypeTrans}}</template>
      </el-table-column>
      <el-table-column prop="address" label="会员地址"> </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
        <el-button size="mini" @click="editMember(scope.row.id)">编辑</el-button>
        <el-button size="mini" type="danger" @click="deleteMember(scope.row.id)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 新增会员对话框 -->
    <el-dialog @close="addMemberClosed"
      title="新增会员"
      :visible.sync="addMemberDialogVisible"
      width="50%">
      <el-form ref="addMemberFormRef" :rules="addMemberFormRules" :model="addMemberForm" label-width="80px">
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model="addMemberForm.cardNum"></el-input>
        </el-form-item>
        <el-form-item  prop="name" label="会员姓名">
          <el-input v-model="addMemberForm.name" placeholder="会员姓名"></el-input>
        </el-form-item>
        <el-form-item prop="birthday" label="会员生日">
          <el-date-picker
            v-model="addMemberForm.birthday"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item  prop="phone" label="手机号码">
          <el-input v-model="addMemberForm.phone" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item  prop="money" label="开卡金额" >
          <el-input v-model="addMemberForm.money" placeholder="开卡金额"></el-input>
        </el-form-item>
        <el-form-item prop="payType" label="支付类型">
        <el-select v-model="addMemberForm.payType" placeholder="请选择支付类型">
          <el-option
            v-for="item in payTypeOption"
            :key="item.type"
            :label="item.name"
            :value="item.type">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  prop="address" label="会员地址" >
        <el-input type="textarea" v-model="addMemberForm.address" placeholder="会员地址"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMemberDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddMember">确 定</el-button>
      </span>
    </el-dialog>
        <!-- 更新会员对话框 -->
    <el-dialog
      title="更新会员"
      :visible.sync="updateMemberDialogVisible"
      width="50%">
      <el-form ref="updateMemberFormRef" :rules="updateMemberFormRules" :model="updateMemberForm" label-width="80px">
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model="updateMemberForm.cardNum"></el-input>
        </el-form-item>
        <el-form-item  prop="name" label="会员姓名">
          <el-input v-model="updateMemberForm.name" placeholder="会员姓名"></el-input>
        </el-form-item>
        <el-form-item prop="birthday" label="会员生日">
          <el-date-picker
            v-model="updateMemberForm.birthday"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item  prop="phone" label="手机号码">
          <el-input v-model="updateMemberForm.phone" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item  prop="money" label="开卡金额" >
          <el-input v-model="updateMemberForm.money" placeholder="开卡金额"></el-input>
        </el-form-item>
        <el-form-item prop="payType" label="支付类型">
        <el-select v-model="updateMemberForm.payType" placeholder="请选择支付类型">
          <el-option
            v-for="item in payTypeOption"
            :key="item.type"
            :label="item.name"
            :value="item.type">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  prop="address" label="会员地址" >
        <el-input type="textarea" v-model="updateMemberForm.address" placeholder="会员地址"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateMemberDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdateMember">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import memberApi from './../../api/member'
// 支付类型
const payTypeOption = [
  { type: '1', name: '现金' },
  { type: '2', name: '微信' },
  { type: '3', name: '支付宝' },
  { type: '4', name: '银行卡' }
]
export default {
  data () {
    return {
      // 获取会员数据的
      memberList: [],
      currentPage: 1,
      pageSize: 1,
      query: {
        // 既是表头表单，又是条件查询的条件
        cardNum: '',
        name: '',
        payType: '',
        birthday: ''
      },
      total: 0,
      payTypeOption,
      // 新增会员对话框
      addMemberDialogVisible: false,
      addMemberForm: {
        cardNum: '',
        name: '',
        phone: '',
        birthday: '',
        address: '',
        money: 0,
        payType: ''
      },
      addMemberFormRules: {
        cardNum: [
          { required: true, message: '请输入卡号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      },
      // 新增会员对话框
      updateMemberDialogVisible: false,
      updateMemberForm: {
        id: null,
        cardNum: '',
        name: '',
        phone: '',
        birthday: '',
        address: '',
        money: 0,
        payType: ''
      },
      updateMemberFormRules: {
        cardNum: [
          { required: true, message: '请输入卡号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }
    }
  },
  // 过滤器中的this无法指向vue实例，因此不能指向data中的数据
  filters: {
    payTypeTrans (type) {
      const obj = payTypeOption.find(obj => obj.type === type)
      return obj ? obj.name : null
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    // 获取会员列表数据
    fetchData () {
      memberApi.getMemberList(this.currentPage, this.pageSize, this.query).then(response => {
        const resp = response.data
        console.log(resp)
        if (resp.flag) {
          // 查询成功
          this.memberList = resp.data.rows
          this.total = resp.data.total
        } else {
          this.$message.error('获取会员信息失败')
        }
      })
    },
    // 编辑按钮
    editMember (rowId) {
      memberApi.getById(rowId).then(response => {
        const resp = response.data
        if (resp.flag) {
          this.updateMemberForm = resp.data
          this.updateMemberDialogVisible = true
        } else {
          this.$message.error('获取信息失败')
        }
      })
    },
    // 删除按钮
    deleteMember (rowId) {
      this.$confirm('确认删除这条记录么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认
        memberApi.deleteById(rowId).then(response => {
          const res = response.data
          if (res.flag) {
            this.$message.success(res.message)
            this.fetchMemberList()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(error => {
        this.$message.info('已取消删除')
        return error
      })
    },
    // 分页
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.fetchData()
    },
    handleCurrentChange (newPage) {
      this.currentPage = newPage
      this.fetchData()
    },
    // 重置按钮
    resetMemberForm () {
      this.$refs.memberFormRef.resetFields()
    },
    // 监听新增对话框的关闭，清空表单
    addMemberClosed () {
      // this.$refs.addMemberFormRef.resetFields()
    },
    // 新增按钮
    addMember () {
      this.addMemberDialogVisible = true
      this.$nextTick(() => {
        this.$refs.addMemberFormRef.resetFields()
      })
    },
    // 点击确定按钮，新增会员
    submitAddMember () {
      this.$refs.addMemberFormRef.validate(valid => {
        if (valid) {
          console.log(this.addMemberForm)
          memberApi.addMember(this.addMemberForm).then(response => {
            const resp = response.data
            if (resp.flag) {
              this.$message.success(resp.message)
              this.addMemberDialogVisible = false
              this.fetchData()
            } else {
              this.$message.error('新增失败')
            }
          })
        } else {
          return false
        }
      })
    },
    // 点击确定按钮，更新会员
    submitUpdateMember () {
      this.$refs.updateMemberFormRef.validate(valid => {
        if (valid) {
          console.log(this.updateMemberForm)
          memberApi.updateById(this.updateMemberForm).then(response => {
            const resp = response.data
            if (resp.flag) {
              this.$message.success('修改成功')
              this.updateMemberDialogVisible = false
              this.fetchData()
            } else {
              this.$message.error('修改失败')
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.el-form{
  margin-top: 20px
}
/* .el-table{
  margin: 10px 10px
} */
</style>
